<template>
	<scroll-view :scroll-y="!selectionDrawer" class="nft_collection" @scrolltoupper="scrollToupper" @scrolltolower="scrollTolower">
		<view class="header">
			<view class="left">
				<uni-icons color="black" size="28" type="left" />
			</view>

			<view class="right" @click="switchNotify">
				<uni-icons v-if="notify" color="#515170" size="28" type="notification-filled" />
				<uni-icons v-else color="black" size="28" type="notification" />
			</view>
		</view>
		<image class="nft_image" src="http://qiniu.relaverse.cn/icon/nft_placeholder.png" mode="widthFix"></image>
		<view class="nft_main">
			<view class="nft_col_name">范德萨发斯蒂芬</view>
			<view class="nft_tags">
				<view class="nft_tag"> 发行50000个 </view>
				<view class="nft_tag"> 流通50000个 </view>
			</view>

			<view class="selection">
				<view class="search">
					<uni-search-bar
						v-model="selection.search"
						placeholder="输入藏品昵称/编号/属性..."
						cancelButton="none"
						bgColor="#EEEEEE"
						textColor="black"
						:radius="20"
						@clear="clearSearch"
						@confirm="search"
					>
						<template v-slot:searchIcon>
							<uni-icons color="#999999" size="18" type="search" />
						</template>
					</uni-search-bar>
				</view>

				<view class="filter">
					<view class="market"> 市场价格 </view>
					<view class="sort">
						<view class="item" @click="changeSort('price')">
							价格
							<view class="triangle" :class="{ desc: !selection.price }"></view>
						</view>
						<view class="item" @click="changeSort('code')">
							编号
							<view class="triangle" :class="{ desc: !selection.code }"></view>
						</view>
					</view>
				</view>
			</view>

			<scroll-view :scroll-y="itemScroll" class="nft_scroll">
				<view class="nft_list">
					<view class="item" v-for="index in 50" :key="index" @click="toNft">
						<image class="item_image" src="http://qiniu.relaverse.cn/icon/nft_placeholder.png" mode="widthFix"></image>
						<view class="item_info">
							<view class="name">藏品名称</view>
							<view class="code">#123465</view>
						</view>
						<view class="item_price">
							<text class="unit">￥ </text>
							<text>369</text>
						</view>
						<uni-icons type="right" size="14" color="#CCCCCC"></uni-icons>
					</view>

					<view v-if="last" class="last">-- 没有更多 --</view>

					<view style="height: 200rpx"></view>
				</view>
			</scroll-view>
		</view>
		<view class="selection_button" @click="selectionDrawer = true">筛选 </view>

		<SelectionDrawer v-model="selectionDrawer" @selection="handleSelection" :data="filters" />
	</scroll-view>
</template>
<script>
import SelectionDrawer from "./components/drawer/selection.vue";
import { checkNotifyPermission, openNotifyPermission } from "@/js_sdk/notify-permission";

export default {
	components: {
		SelectionDrawer,
	},
	data() {
		return {
			itemScroll: false,
			last: true,
			notify: false,
			selectionDrawer: false,
			selection: {
				search: "",
				price: true,
				code: true,
			},
            filters: []
		};
	},

	methods: {
		scrollToupper() {
			console.log("我到顶了");
			this.itemScroll = false;
		},
		scrollTolower() {
			console.log("我到底了");
			this.itemScroll = true;
		},
		changeSort(type) {
			this.selection[type] = !this.selection[type];
		},

		clearSearch() {},

		search() {},

		switchNotify() {
			if (!checkNotifyPermission()) {
				uni.showModal({
					title: "提示",
					content: "是否前往打开通知权限",
					success: (res) => {
						if (res.confirm) {
							openNotifyPermission();
						} else if (res.cancel) {
							console.log("用户点击取消");
						}
					},
				});
			} else {
				this.notify = !this.notify;
			}
		},

		handleSelection(selection) {
			console.log("selection", selection);
            this.filters = selection
		},

        toNft() {
            uni.navigateTo({
                url: "/pages/market/nft",
            });
        }
	},
};
</script>
<style lang="scss" scoped>
.nft_collection {
	width: 100vw;
	height: 100vh;
	background-color: #000000;
	position: relative;

	// display: flex;
	// justify-content: flex-start;
	// align-items: center;
	// flex-direction: column;

	.header {
		position: fixed;
		left: 0;
		top: 120rpx;
		z-index: 5;
		width: 100%;
		height: 70rpx;
		padding: 0 40rpx;

		display: flex;
		justify-content: space-between;
		align-content: center;

		.left,
		.right {
			width: 70rpx;
			height: 70rpx;
			background-color: rgba($color: #ffffff, $alpha: 0.2);
			line-height: 70rpx;
			text-align: center;
			border-radius: 70rpx;
		}
	}

	.nft_image {
		width: 100%;
		background-color: black;
	}

	.nft_main {
		width: 100%;
		height: calc(100vh - 50vw);
		// flex: 1;
		color: white;
		padding: 40rpx;
		overflow: hidden;
		background-color: black;

		.nft_col_name {
			width: 100%;
			font-weight: 500;
			font-size: 44rpx;
		}

		.nft_tags {
			width: 100%;
			height: 48rpx;

			margin-top: 20rpx;

			display: flex;
			justify-content: flex-start;
			align-items: center;

			.nft_tag {
				width: 168rpx;
				height: 100%;
				background: linear-gradient(270deg, #fefbec 0%, #e5cc96 100%);
				border-radius: 8rpx;

				font-weight: bold;
				font-size: 24rpx;
				line-height: 48rpx;
				text-align: center;

				color: black;

				margin-right: 20rpx;
			}
		}

		.selection {
			width: 100%;
			height: 174rpx;
			margin-top: 40rpx;

			.search {
				width: 100%;
				height: 64rpx;

				.uni-searchbar {
					padding: 0;
					margin-top: 20rpx;

					::v-deep .uni-searchbar__text-placeholder {
						color: #999999;
					}
				}
			}

			.filter {
				height: 50rpx;
				width: 100%;

				margin-top: 40rpx;

				display: flex;
				justify-content: space-between;
				align-items: center;

				.market {
					font-weight: 500;
					font-size: 36rpx;
				}

				.sort {
					width: 166rpx;
					height: 34rpx;

					display: flex;
					justify-content: flex-start;
					align-items: center;

					.item {
						height: 100%;
						width: 68rpx;

						font-size: 24rpx;
						color: white;

						font-weight: bold;

						display: flex;
						justify-content: center;
						align-items: center;

						& + .item {
							margin-left: 30rpx;
						}

						.triangle {
							width: 13rpx;
							height: 80%;
							margin-left: 6rpx;
							position: relative;

							&::before {
								content: "";
								position: absolute;
								top: 0;
								left: 0;
								border-left: 10rpx solid transparent; /* 左边框 */
								border-right: 10rpx solid transparent; /* 右边框 */
								border-bottom: 12rpx solid white; /* 上三角形的底边框，颜色为蓝色 */
								transform: scale(0.8);
							}

							&::after {
								content: "";
								position: absolute;
								bottom: 0;
								left: 0;
								border-left: 10rpx solid transparent; /* 左边框 */
								border-right: 10rpx solid transparent; /* 右边框 */
								border-top: 12rpx solid #cccccc;
								transform: scale(0.8);
							}

							&.desc {
								&::before {
									border-bottom: 12rpx solid #cccccc; /* 上三角形的底边框，颜色为蓝色 */
								}

								&::after {
									border-top: 12rpx solid white;
								}
							}
						}
					}
				}
			}
		}

		.nft_scroll {
			width: 100%;
			height: calc(100vh - 50vw - 80rpx - 44rpx - 68rpx - 174rpx);

			.nft_list {
				width: 100%;
				height: max-content;

				.item {
					height: 96rpx;
					margin-bottom: 20rpx;

					display: flex;
					justify-content: flex-start;
					align-items: center;
					color: white;

					.item_image {
						width: 92rpx;
						border-radius: 15rpx;
					}
					.item_info {
						margin-left: 8rpx;
						.name {
							font-weight: 500;
							font-size: 32rpx;
						}

						.code {
							font-weight: 500;
							font-size: 28rpx;
						}
					}
					.item_price {
						margin-left: auto;
						margin-right: 20rpx;
						font-size: 40rpx;

						.unit {
							font-size: 28rpx;
						}
					}
				}

				.last {
					margin: 20rpx auto;
					color: #a9a7a7;
					width: 100%;
					text-align: center;
					font-size: 24rpx;
				}
			}
		}
	}

	.selection_button {
		position: fixed;
		left: 50%;
		bottom: 30rpx;
		transform: translateX(-50%);
		width: calc(100% - 90rpx);
		height: 100rpx;

		font-weight: bold;
		font-size: 40rpx;
		line-height: 100rpx;
		text-align: center;
		color: white;
		background: #1952f8;
		z-index: 5;
		border-radius: 30rpx;
	}
}
</style>
